import React, { Component } from 'react';
import {
	StyleSheet, View, Image, TouchableOpacity, Dimensions
} from "react-native";
import { API, API_GENERATE } from '../../../../config/api';
import { GLOBAL } from '../../../../config/global';
import { style } from '../../../../theme/style';
import { Common } from '../../../../component/common/Common.js';
import HTTP from '../../../../utils/http'
import { PageStatusIndex } from '../../../../component/page-status/PageStatusIndex';
const scale = GLOBAL.SCALE;
import Pdf from 'react-native-pdf';
import ModalPicDelComponent from '../../../../component/ModalPicDelComponent';
import ImageViewer from 'react-native-image-zoom-viewer';

const modalPicDelCfg = {
	visible: false,
	uri: null,
	delTextHide: true,
	delPress: () => { },
	picPress: () => { }
}
export class ContractPdfPage extends Component {
	static navigationOptions = ({ navigation, navigationOptions }) => {
		let { title } = navigation.state.params || {};
		return {
			headerTitle: title || '合同信息',
			headerTintColor: style.color.white,
			headerLeft: <Common type="headLeft" onPress={() => { navigation.goBack() }} color='#fff' />,
			headerRight: (<Image style={style.head.headRightEmpty} source={require('../../../../imgs/goBackEmpty.png')} />),
			headerStyle: style.head.headerStyle,
			headerTitleStyle: {
				flex: 1,
				textAlign: 'center'
			}
		}
	};

	constructor(props) {
		super(props);
		this.finalFileId = props.navigation.state.params.finalFileId;
		this.state = {
			data: {},
			pdfsource: {},
			imgsource: {},
			status: 'loading',
		}
		modalPicDelCfg.picPress = () => {
			modalPicDelCfg.visible = false;
			modalPicDelCfg.uri = null;
			this.setState({
				previewModalVisible: false,
			});
		}
	}

	componentWillMount() {
		let { pdfData } = this.props.navigation.state.params || {};
		if (pdfData) {
			let pdfsource = { uri: pdfData.pdf, cache: true };
			if (pdfData.pdf) {
				pdfsource.uri = 'data:application/pdf;base64,' + pdfData.pdf;
				this.setState({
					status: 'data',
					pdfsource
				});
			} else {
				this.setState({
					status: 'empty'
				});
			}
		} else {
			this._getListData()
		}

	}

	//数据加载出错回调
	_onErrorPress = () => {
		this.setState({
			status: 'loading'
		}, function () {
			this._getListData();
		})
	}

	//初始化pdf信息
	async _getListData() {
		//获取pdf文件流信息
		let responseData1 = await HTTP.GET(API_GENERATE(API.GET_IMG_VIEW), { fileId: this.finalFileId }, { rejectError: false, handerError: true }, 30000);
		let pdfUri;
		let imgUri;
		if (responseData1) {
			if (responseData1.fileContent) {
				pdfUri = 'data:application/pdf;base64,' + responseData1.fileContent;
			}
			if (responseData1.image) {
				imgUri = responseData1.image;
			}
			if (!responseData1.image && !responseData1.fileContent) {
				this.setState({
					status: 'empty'
				});
			} else {
				this.setState({
					status: 'data'
				});
			}
			const pdfsource = { uri: pdfUri, cache: true };
			const imgsource = { uri: imgUri };
			this.setState({
				data: responseData1,
				pdfsource: pdfsource,
				imgsource: imgsource
			});
		} else {
			this.setState({
				status: 'error'
			});
		}

	}
	_showImage = (imgsource) => {
		if (imgsource && imgsource.uri) {
			modalPicDelCfg.visible = true;
			modalPicDelCfg.uri = imgsource.uri;
			this.setState({ ls: true });
		}
	}

	render() {
		const { data, pdfsource, imgsource, status } = this.state;
		return (
			<View style={styles.container}>
				{status == 'data' && pdfsource && pdfsource.uri ?
					<Pdf
						source={pdfsource}
						style={styles.pdf} />
					: null
				}
				{status == 'data' && imgsource && imgsource.uri ?
					<ImageViewer imageUrls={[{
						url: imgsource.uri,
						width: Dimensions.get('window').width
					}]} />
					// <TouchableOpacity onPress={() => { this._showImage(imgsource) }}><Image source={imgsource} style={{ width: 375 * scale, height: '100%' }} /></TouchableOpacity>
					: null
				}
				<PageStatusIndex status={status} errorText="文件加载失败" emptyText="未查到相关文件" onErrorPress={this._onErrorPress} />
				<ModalPicDelComponent {...modalPicDelCfg} />
			</View >
		)
	}
}
const styles = StyleSheet.create({
	container: {
		backgroundColor: style.color.bgGray,
		flex: 1,
	},
	pdf: {
		flex: 1,
		width: 375 * scale,
	}
});